<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="course">
			<scroll-view @scrolltolower="lowerBottom" class="box_scroll" scroll-y="true" refresher-enabled="true"
				:refresher-triggered="triggered" :refresher-threshold="50" refresher-background="#f8f8f8"
				@refresherrefresh="onRefresh" @refresherrestore="onRestore">
				<view class="course_items" v-for="(item, index) in courseList" :key="index">
					<image class="image" :src="item.titleImageUrl" alt=""></image>
					<view class="titles">
						<view class="recommend" v-if="item.recommend">
							新上
						</view>
						<text class="describe">
							{{ item.title }}
						</text>
					</view>
					<view class="bottom">
						<view class="bottom_left">
							<image src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753776375504_2ca00d91/eye.png?x-oss-process=image/resize,w_300" alt=""></image>
							<text>
								{{ item.hits }}
							</text>
						</view>
						<view :class="!item.status ? 'bottom_right' : 'bottom_right_dis'" @click="baoming(item)">
							{{ !item.status ? '立即报名' : item.status == '1' ? '报名结束' : '已报名' }}
						</view>
					</view>
				</view>

				<view class="zanwu" v-if="courseList.length == 0">暂无数据</view>
				<u-loadmore v-if="courseList.length != 0" fontSize="25" :status="status" />

			</scroll-view>

		</view>
	</view>
</template>

<script>
import { listCompetition, competitionApply } from '@/api/index'
import { systemInfo } from '../../utils/mixin'
import config from '@/config/config.js'
export default {
	components: {},
	mixins: [systemInfo],
	data() {
		return {
			courseList: [],

			queryParams: {
				pageNum: 1,
				pageSize: 10,
			},
			status: 'loadmore',
			triggered: false,
			downRefresh: false,
			pageCount: 0,
		}
	},
	onLoad() {
		// 状态栏高度
		this.getSystemInfo();

		this.triggered = true;
		this.downRefresh = true
		this.queryParams.pageNum = 1
		this.courseList = []
		this.getcollectList()
	},
	methods: {
		/** 报名 */
		async baoming(item) {
			if (item.status == 0) {
				await competitionApply({ id: item.id })
				uni.$u.toast("报名成功")
				this.$set(item, 'status', 2)
			}
		},

		async getcollectList() {
			const res = await listCompetition({ ...this.queryParams })
			this.pageCount = res.total
			res.rows.forEach(element => {
				element.titleImageUrl = config.pic_prefix + element.titleImage
			});
			//停止加载中
			this.triggered = false;
			this.downRefresh = false
			//处理完逻辑停止刷新
			uni.stopPullDownRefresh();
			if (this.courseList.length >= this.pageCount) {
				this.status = 'nomore';
			} else {
				let arr = [...this.courseList, ...res.rows]
				this.courseList = arr
				if (res.rows.length < 10) {
					this.status = 'nomore';
				}
			}
		},

		//触底加载
		lowerBottom() {
			if (this.queryParams.pageNum < this.pageCount) {
				if (!this.downRefresh) {
					this.downRefresh = true
					this.status = 'loading';
					this.queryParams.pageNum += 1
					this.getcollectList()
				}
			}
		},
		onRefresh() {
			this.triggered = true;
			this.downRefresh = true
			this.queryParams.pageNum = 1
			this.courseList = []
			this.getcollectList()
		},
		onRestore() {
			this.triggered = false; // 需要重置
		},
	}
}
</script>

<style lang="less" scoped>
.content {
	background-color: rgb(245, 245, 245);
	width: 100%;
	box-sizing: border-box;

	.course {
		width: calc(100% - 60rpx);
		height: calc(100% - 60rpx);
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		position: relative;
		top: 30rpx;
		margin: auto;
		overflow: auto;
		border-radius: 15px;

		.zanwu {
			font-size: 30rpx;
			color: #b3adad;
			text-align: center;
			margin-top: 20px;
		}


		.box_scroll {
			height: 100%;
		}

		.course_items {
			margin-top: 40rpx;
			width: 100%;

			image {
				width: 318px;
				height: 161px;
				border-top-left-radius: 30rpx;
				border-bottom-right-radius: 30rpx;
			}


			.titles {
				width: 100%;
				text-align: left;
				vertical-align: middle;

				.recommend {
					display: inline-block;
					width: 60rpx;
					height: 30rpx;
					background-color: rgb(249, 0, 0);
					color: #fff;
					font-size: 16rpx;
					text-align: center;
					line-height: 30rpx;
					letter-spacing: 2rpx;
					border-top-right-radius: 15rpx;
					border-bottom-right-radius: 15rpx;
					margin-top: 20rpx;
					margin-right: 10rpx;
				}

				.describe {
					font-size: 26rpx;
					line-height: 30rpx;
					letter-spacing: 2rpx;
				}

			}
		}

		.bottom {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			justify-content: space-between;

			.bottom_left {
				display: flex;
				align-items: center;
				color: rgb(179, 173, 173);
				font-size: 20rpx;

				image {
					width: 18rpx;
					height: 14rpx;
					margin-right: 5rpx;
				}
			}

			.bottom_right {
				width: 135rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				color: #fff;
				background-color: rgb(249, 0, 0);
				border-radius: 6rpx;
				font-size: 24rpx;
				letter-spacing: 3rpx;
			}

			.bottom_right_dis {
				width: 135rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				color: #fff;
				background-color: rgb(202, 202, 202);
				border-radius: 6rpx;
				font-size: 24rpx;
				letter-spacing: 3rpx;
			}
		}
	}
}
</style>
